<template>
  <!--<el-dialog-->
    <!--:title="title"-->
    <!--:visible.sync="visible"-->
    <!--:close-on-click-modal=false-->
    <!--:close-on-press-escape=false-->
    <!--:show-close=false-->
    <!--width="70%">-->
    <div v-show="visible" style="width: 938px;margin-left: 4px;">
    <el-form
      label-width="150px"
      :model="deptSearchForm"
      ref="deptSearchForm">
      <el-row>
        <el-col :span="15">
          <el-form-item class="form-item" label="部门名称:" prop="searchValue">
            <el-input placeholder="输入关键字进行过滤" v-model="searchValue"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7" :offset="2">
          <el-form-item v-if="firstType == null" class="form-item" label="只显示本级部门:" prop="localRegion">
            <el-switch v-model="localRegion" active-color="#13ce66" inactive-color="#DCDFE6"></el-switch>
          </el-form-item>
          <el-form-item v-if="firstType != null" class="form-item" label="第一级部门类型:" prop="localRegion">
            <el-select v-model="firstTypeSelectValue">
              <el-option value="-1" label="全部"/>
              <el-option value="1" label="区域"/>
              <el-option value="2" label="单位"/>
              <el-option value="3" label="部门/科室"/>
              <el-option value="4" label="下属单位"/>
              <el-option value="5" label="乡镇街道"/>
              <el-option value="6" label="村、社区"/>
              <el-option value="7" label="网格"/>
              <el-option value="9" label="虚拟组织"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-row>
        <el-col :span="16">
          <div style="height:300px;overflow:auto;margin-left: 30px">
            <el-tree class="filter-tree"
                     :data="deptData"
                     v-loading=loading
                     :load="getDeptChildren"
                     lazy
                     show-checkbox
                     check-strictly
                     node-key="id"
                     ref="deptTree"
                     accordion
                     highlight-current
                     :props="defaultProps"
                     :default-checked-keys="checkedKeys"
                     @check-change="nodeCheck" v-show="lazy">
            </el-tree>
            <el-tree class="filter-tree"
                     v-loading=loading
                     :data="deptSynData"
                     node-key="id"
                     show-checkbox
                     check-strictly
                     ref="deptSynTree"
                     :default-expand-all="true"
                     accordion
                     highlight-current
                     :props="defaultProps"
                     :default-checked-keys="checkedKeys"
                     @check-change="nodeCheck" v-show="!lazy">
            </el-tree>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="margin-left: 10px;">
            <h3>已选部门：</h3>
            <el-tag style="margin: 5px" v-if="deptNames" v-for="name in deptNames" :key="name">{{name}}</el-tag>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="text-align: right">
      <el-button type="primary" @click="confirm()" size="small">确定已选部门</el-button>
      <el-button @click="cancel()" size="small">取 消</el-button>
    </div>
    </div>
  <!--</el-dialog>-->
</template>

<script>
  import {getDeptTree, getDeptXieTree} from "@/api/system";
  import {mapGetters} from "vuex";

  export default {
    name: "deptCheckNotDialog",
    created() {
      this.lazy = true;
      this.debouncedGetSearchResult = _.debounce(this.getSearchResult, 500);
    },
    data() {
      return {
        deptIds: [],
        deptNames: [],
        searchValue: '',//搜索文字
        deptData: [],//组织机构树数据
        deptSynData: [],
        lazy: true,
        localRegion: true,
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        loading: false,
        deptSearchForm:{},
        firstTypeSelectValue: null
      }
    },
    props: {
      // 第一级部门类型，参考后台枚举类 com/bostech/pums/admin/api/entity/enums/SysDeptTypeEnum.java
      //"1":"区域"
      //"2":"单位"
      //"3":"部门/科室"
      //"4":"下属单位"
      //"5":"乡镇街道"
      //"6":"村、社区"
      //"7":"网格"
      //"9":"虚拟组织"
      firstType: {
        type: String
      },
      // 最小部门类型，小于此类型的子部门不会显示，type为null会显示。参考后台枚举类 com/bostech/pums/admin/api/entity/enums/SysDeptTypeEnum.java
      //"1":"区域"
      //"2":"单位"
      //"3":"部门/科室"
      //"4":"下属单位"
      //"5":"乡镇街道"
      //"6":"村、社区"
      //"7":"网格"
      //"9":"虚拟组织"
      miniType: {
        type: String,
        default: null
      },
      title: {
        type: String,
        default: '部门选择'
      },
      showCheckbox: {
        type: Boolean,
        default: false
      },
      visible: {
        type: Boolean,
        default: false
      },
      checkedKeys:{
        type: Array,
        default: () => []
      }
    },
    computed: mapGetters(["deptInfo"]),
    watch: {
      searchValue(newValue, oldValue) {
        if (newValue.length <= 1) {
          this.lazy = true;
        } else if (newValue) {
          this.lazy = false;
          this.loading = true;
          this.getSearchResult(newValue);
        }
      },
      localRegion(newValue, oldValue) {
        this.lazy = true;
        this.searchValue = "";
        this.loading = true;
        let queryParams = {
          miniType: this.miniType
        };
        if (newValue) {
          queryParams.parentId = this.deptInfo.parentId
        } else {
          queryParams.parentId = -2;
        }
        getDeptTree(queryParams).then(response => {
          this.loading = false;
          this.deptData = response.data.data;
        })
      },
      firstTypeSelectValue(){
        this.loading = true;
        let queryParams = {
          firstType: this.firstTypeSelectValue
        };

        getDeptTree(queryParams).then(response => {
          this.loading = false;
          this.deptData = response.data.data;
        })
      },
      visible(newValue, oldValue) {
        if(newValue){
          this.firstTypeSelectValue = this.firstType;
        }
      }
    },
    methods: {
      // 获取组织机构树
      getSearchResult(value) {
        let param = {};
        param.name = value;
        if (this.localRegion) {
          param.areaCode = this.deptInfo.areaCode
        }
        getDeptXieTree(param).then(response => {
          this.loading = false;
          this.deptSynData = response.data.data;
        })
      },
      // 获取组织机构树
      getDeptChildren(node, resolve) {
        this.loading = true;
        let queryParams = {};
        if(node.level == 0 && this.firstType != null && this.firstType != undefined) {
          if(this.firstType == "-1"){
            queryParams.parentId = -1;
          }else {
            queryParams.firstType = this.firstTypeSelectValue;
          }
        }else {
          queryParams.miniType = this.miniType;
          if (this.localRegion && node.level == 0) {     //node.level == 0说明是第一级：全国、浙江省、、、
            queryParams.parentId = this.deptInfo.parentId;
          } else if (!this.localRegion && node == undefined) {
            queryParams.parentId = -2;
          } else if (this.localRegion && node.data.length == 0) {
            queryParams.parentId = this.deptInfo.parentId;
          } else {
            queryParams.parentId = node.data.id
          }
        }
        getDeptTree(queryParams).then(response => {
          this.loading = false;
          resolve(response.data.data);
        })
      },
      //组织机构树点击事件
      nodeCheck(data, checked, indeterminate) {
        if(checked){
          this.deptIds.push(data.id);
          this.deptNames.push(data.name);
          this.checkedKeys.push(data.id);
        }else{
          this.deptIds.splice(this.deptIds.findIndex(id => id === data.id ),1);
          this.deptNames.splice(this.deptNames.findIndex(name => name === data.name),1);
          this.checkedKeys.splice(this.deptIds.findIndex(id => id === data.id ),1);

        }
      },
      cancel() {
        this.$emit('cancel',this.deptIds.join(","), this.deptNames.join(","))
      },
      confirm() {
        if(this.deptIds==null||this.deptIds.length==0){
          this.$message({
            message: '请先选择部门',
            type: 'warning'
          });
          return;
        }else if(this.deptIds.length>0){
          this.$emit('getCheckInfo',this.deptIds.join(","), this.deptNames.join(","))
        }
      }
    }
  };
</script>

<style lang="scss">
  .el-tree > .el-tree-node {
    min-width: 100%;
    min-height: 100%;
    display: inline-block;
  }
</style>
